<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../layui/css/style.css" media="all">
		<script src="../layui/layui.all.js"></script>
		<script src="../layui/echarts.js"></script>
	</head>
	<body>

		<div class="layadmin-header">
			<div class="layui-breadcrumb" lay-filter="breadcrumb">
				<a><cite>车位统计</cite></a>
			</div>
		</div>

		<div class="layui-fluid mainBody">
			<div class="layui-col-md12 tabTitle layui-tab" lay-filter="demo">
				<ul class="layui-tab-title">
					<li class="layui-this">剩余车位统计</li>
					<li>分时段统计</li>
				</ul>
				<div class="layui-tab-content" style="padding: 0;">
					<!-- 剩余 车位统计 -->
					<div class="layui-tab-item layui-show" style="position: relative;min-height: 200px;">
						<div class='fresh'>
							<input type="checkbox" class="autoRefresh">
							<span>&nbsp;自动刷新&nbsp;&nbsp;</span>
							<button class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-refresh"></i></button>
						</div>
						<div class="layui-col-md12 contents">
							<div class="layui-col-md4 items">
								<div class="areaA"></div>
								<div class="areaDetail">
									<div class="names"><span>A&nbsp;</span>区剩余车位</div>
									<div style="overflow: hidden;padding-bottom: 36px;">
										<div class="layui-col-md4">
											<div class="tips">1车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
										<div class="layui-col-md4">
											<div class="tips">2车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
										<div class="layui-col-md4">
											<div class="tips">3车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
									</div>
								</div>
							</div>
							<div class="layui-col-md8 items">
								<div class="areaB"></div>
								<div class="areaDetail" style='margin:0 24px'>
									<div class="names"><span>B&nbsp;</span>区剩余车位</div>
									<div style="overflow: hidden;padding-bottom: 36px;">
										<div class="layui-col-md2">
											<div class="tips">4车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
										<div class="layui-col-md2">
											<div class="tips">5车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
										<div class="layui-col-md2">
											<div class="tips">6车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
										<div class="layui-col-md2">
											<div class="tips">7车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
										<div class="layui-col-md2">
											<div class="tips">8车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
										<div class="layui-col-md2">
											<div class="tips">9车道<strong>10</strong>个</div>
											<img src="../layui/images/park.jpg" alt="">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 分时段统计 -->
					<div class="layui-tab-item">
						<div class="mainInfo">
							<div class="titles">阳澄湖服务区车位变化</div>
							<div class="layui-btn-group btns">
								<button class="layui-btn layui-btn-primary active">周</button>
								<button class="layui-btn layui-btn-primary">月</button>
								<button class="layui-btn layui-btn-primary">年</button>
							</div>
						</div>
					</div>
				</div>
				<div class="box"></div>
			</div>
		</div>

	</body>
</html>

<script>
	var $ = layui.$,
		element = layui.element,
		table = layui.table,
		parks = [10, 5, 1, 12, 3, 5, 0, 7, 0]; //车道剩余个数

	// 车道剩余个数 赋值
	setR_G(parks, 1)
	var option = {
			tooltip: {
				trigger: 'axis'
			},
			color: ["#14cec3"],
			grid: {
				right: 0
			},
			legend: {
				data: ['意向']
			},
			toolbox: {
				show: true,
				feature: {
					mark: {
						show: true
					},
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					restore: {
						show: true
					},
					saveAsImage: {
						show: true
					}
				}
			},
			calculable: true,
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			}],
			yAxis: [{
				type: 'value'
			}],
			series: [{
				name: '意向',
				type: 'line',
				smooth: true,
				itemStyle: {
					normal: {
						areaStyle: {
							type: 'default'
						}
					}
				},
				data: [1320, 1132, 601, 234, 220, 190, 209]
			}]
		},
		optionA = {
			title: {
				text: "            个",
				subtext: 'A区剩余车位总数',
				left: "108px",
				top: "116px",
				textStyle:{
					color:"#18cdc7",
					
				},
				subtextStyle:{
					color:"#333",
					textAlign:"center"
				}
				
			},
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)"
			},
			color: ["#14cec3", "#d1dee6"],
			series: [{
				name: '车位',
				type: 'pie',
				radius: ['68%', '80%'],
				startAngle: 45, //起始角度
				label: {
					normal: {
						position: 'center',
						show: true,
						textStyle: {
							fontSize: '36',
							color: '#14cec3'
						},
						formatter: function() {
							return "60"
						}
					},
					emphasis: {
						show: true,
						textStyle: {
							fontSize: '36',
							color: '#14cec3'
						},
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: [{
						value: 60,
						name: '剩余车位'
					},
					{
						value: 40,
						name: '已使用车位'
					}
				]
			}]
		},
		optionB = {
			title: {
				text: "            个",
				subtext: 'B区剩余车位总数',
				left: "108px",
				top: "116px",
				textStyle:{
					color:"#18cdc7",
					
				},
				subtextStyle:{
					color:"#333",
					textAlign:"center"
				}
				
			},
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b}: {c} ({d}%)"
			},
			color: ["#14cec3", "#d1dee6"],
			series: [{
				name: '车位',
				type: 'pie',
				radius: ['68%', '80%'],
				startAngle: 45, //起始角度
				label: {
					normal: {
						position: 'center',
						show: true,
						textStyle: {
							fontSize: '36',
							color: '#14cec3'
						},
						formatter: function() {
							return "80"
						}
					},
					emphasis: {
						show: true,
						textStyle: {
							fontSize: '36',
							color: '#14cec3'
						},
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: [{
						value: 80,
						name: '剩余车位'
					},
					{
						value: 100,
						name: '已使用车位'
					}
				]
			}]};

	//事件监听
	element.on('tab(demo)', function(data) {
		if (data.index == 1) {
			$(".box").show();
			getItem();
		} else {
			$(".box").hide();
		}
	});
	$('.mainBody').on("click", ".btns .layui-btn", function() {
		$(this).addClass("active").siblings().removeClass("active");
		getItem($(this).attr("role"));
	}).on("click", ".fresh .layui-btn", function() {
		// 刷新按钮
		setR_G(parks, 0);
	}).on("click", ".fresh .autoRefresh", function() {
		//自动刷新
		if($(this).prop("checked")==true){
			console.log('自动刷新');
		}else{
			console.log('取消自动刷新');
		}
	})
	echarts.init($(".areaA")[0]).setOption(optionA);
	echarts.init($(".areaB")[0]).setOption(optionB);
	function getItem(data) {
		// 			$.ajax({
		// 				type: "post",
		// 				url: '',
		// 				async: false,
		// 				success: function(res) {
		// 
		// 				},
		// 				error: function(err) {
		// 
		// 				}
		// 			})
		echarts.init($(".box")[0]).setOption(option);

	}

	function setR_G(arr, filter) {
		var filter = parseInt(filter) || 0;
		arr.forEach(function(e, i) {
			if (e <= filter) {
				$(".tips").eq(i).parent().addClass("red");
			} else {
				$(".tips").eq(i).parent().removeClass("red");
			}
			$(".tips").eq(i).html(i + 1 + '车道&nbsp;<strong>' + e + '</strong>个')
		})
	}
</script>
